<template>
	<view>
		<!-- 暂位 -->
		<view >
			<!-- 头部导航栏 -->
			<view style="margin-top: 20upx; height: 100upx;" class="flex align-center">
				<view style="width: 50upx;margin-left: 20upx;" @click="goBack" >
					<image src="../../static/icon/left.png" style="width: 35upx; height: 50upx; margin:auto;  filter: grayscale(100);"></image>
				</view>
				<view style="font-size: 150%; margin-left: 210upx;">注册页面</view>
			</view>
			<!-- 头部导航栏结束 -->
			
		</view>
		<!-- logo -->
		<view class="flex justify-center align-center flex-direction" style=" margin-bottom: 80upx;">
			<view><image src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=859483356,978332192&fm=111&gp=0.jpg" class="logo"></image></view>
			<view style="font-size: 200% ; font-weight: bold;">注册</view>
		</view>
	
		<!-- 表单 -->
		<view>
			<view class="log-form">
				<input class="log-input" v-model="form.username" type="text" placeholder="用户名"/>
			</view>
			<view class="log-form">
				<input class="log-input" v-model="form.phone" type="text" placeholder="输入手机号"/>
			</view>
			<view class="log-form flex align-center">
				<input class="log-input" v-model="form.msgCode" type="msgCode" placeholder="请输入验证码"/>
				<button :disabled="isCodeSend" class="cu-tag bg-orange round"  style="width: 200upx; height: 80upx;" @click="getCode">{{codeText}}</button>
			</view>
			<view class="log-form">
				<input class="log-input" v-model="form.password1" type="text" placeholder="请输入密码"/>
			</view>
			<view class="log-form">
				<input class="log-input" v-model="form.password2" type="text" placeholder="确认密码"/>
			</view>
		</view>
		
		<!-- 注册按钮 -->
		<view class="flex justify-center" style="margin-top: 40upx;margin-bottom: 40upx;">
			<button class="cu-btn  bg-orange" style="width: 700upx;height: 100upx;" @tap="register">注册</button>
		</view>
	

		<!-- 版权声明 -->
		<view class="plagiarism">
			<view>版权声明 村乡结合部</view>
			<view style="margin-top: 5upx;">登录代表您已同意<text style="color: #007AFF;">【隐私政策】</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeText:'获取验证码',
				isCodeSend: false ,// 默认未发送
				form:{ // 表单
					phone:'',
					password1:'',
					password2:'',
					msgCode:'',
					username:''
				}
			}
		},
		methods: {
			
			//返回按钮
			goBack(){
				uni.navigateTo({
					url:"./login"
				})
			},
			// 用户注册
			register(){
				if(this.form.password1 != (this.form.password2)){
					uni.showToast({
						title:'两次密码不一致！',
						icon:'none'
					})
					this.form.password1 = this.form.password2 = ''
					return
				}
				if(this.form.msgCode==''){
					uni.showToast({
						title:'请输入验证码！',
						icon:'none'
					})
					return
				}
				this.$request({
					url:'front/member/regist',
					params:{
						phone:this.form.phone,
						code:this.form.msgCode,
						password:this.form.password2,
						username:this.form.username
					},
					type:'POST'
				}).then(res=>{
					console.log('res',res)
					if(res.code=='0'){
						uni.navigateBack(-1)
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			
			
			async getCode(){
				if( this.form.phone.length != 11) {
					uni.showToast({
						icon:"none",
						title:'手机号格式不正确！'
					})
					return
				}
				
				// 设置按钮不可点击
				if(this.codeText=='获取验证码'){
					this.isCodeSend = true // 按钮变为不可点击状态
				}else{
					return
				}
				
				var res = await this.$request({
					url:'front/member/sms/sendCode',
					params:{
						phone:this.form.phone
					},
					type:'GET'
				})
				if(res.msg=='success'){
					uni.showToast({
						title:res.data,
						icon:'none',
						duration:5000
					})
					console.log('msgCode',res.data)
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					this.isCodeSend = false
					return
				}
				
				// 填写允许周期
				var time = 10
				var setTimeout = setInterval(()=>{ // 一秒触发一次
					time--
					if(time<=0){
						this.codeText = '获取验证码'
						this.isCodeSend = false // 恢复点击
						clearInterval(setTimeout)
					}else{
						this.codeText = time+'后重发'
					}
				},1000)
			}
		}
	}
</script>

<style>
.logo {
	width: 250upx;
	height: 250upx;
}
.form-label {
	font-size: 150%;
	font-weight: bold;
}
.log-form {
	display: flex;
	padding-left: 50upx;
}
.log-input {
	height: 100upx;
	width: 600upx;
	border-bottom: 1upx solid #DDDDDD;
}
.line {
	height: 1upx;
	background-color: #DDDDDD;
	flex-grow: 1;
}
.log-method {
	width: 100upx;
	height: 80upx;
	padding-left: 20upx;
}
.plagiarism {
	position: fixed;
	width: 700upx;
	bottom: 10upx; // 靠底部多少举例
	color: gray;	
	text-align: center;
}
</style>
